<!--
 * @Author: dengyl
 * @Date: 2022-01-18 14:07:26
 * @LastEditTime: 2022-08-11 15:16:26
 * @LastEditors: 代琪 1529992814@qq.com
 * @Description: 多图平铺2
 * @FilePath: \code\ctp-static-portal-front\src\components\news\components\effuse.vue
-->
<template>
  <div
    class="effuse image-view"
    :class="[imageStyle]"
    ref="effuseEl"
    :style="{
      height: effuseHeight + 'px',
      background: options.backgroundColor
    }"
  >
    <ul v-if="flag" class="row">
      <li class="up-row">
        <div :style="bigNewsSize" class="bigNews" :title="bigNews.subject">
          <div class="text-img">
            <a :href="`${newsBasePath}${bigNews.link}`" target="_blank">
              <ShowImg :item="bigNews" />
              <span v-if="options.rowList.includes('subject')" class="text"
                ><span>{{ bigNews.subject }}</span></span
              >
            </a>
          </div>
        </div>
        <div class="otherNews" :style="{ marginLeft: bigNewsSize.width }">
          <div
            v-for="(other, i) in showNews"
            :key="other.id"
            :style="[otherNewsSize, (i + 1) % (otherNum / 2) === 0 ? { marginRight: 0 } : '']"
            class="text-img"
            :title="other.subject"
          >
            <a :href="`${newsBasePath}${other.link}`" target="_blank">
              <ShowImg :item="other" />
              <span v-if="options.rowList.includes('subject')" class="text"
                ><span>{{ other.subject }}</span></span
              >
            </a>
          </div>
        </div>
      </li>
    </ul>
    <ul v-else class="column">
      <li class="up-row">
        <div :style="bigNewsSize" class="bigNews" :title="bigNews.subject">
          <div class="text-img">
            <a :href="`${newsBasePath}${bigNews.link}`" target="_blank">
              <ShowImg :item="bigNews" />
              <span v-if="options.rowList.includes('subject')" class="text"
                ><span>{{ bigNews.subject }}</span></span
              >
            </a>
          </div>
        </div>
      </li>
      <li class="down-row">
        <div :style="otherBoxSize" class="otherNews">
          <div
            v-for="other in showNews"
            :key="other.id"
            :style="otherNewsSize"
            class="text-img"
            :title="other.subject"
          >
            <a :href="`${newsBasePath}${other.link}`" target="_blank">
              <ShowImg :item="other" />
              <span v-if="options.rowList.includes('subject')" class="text"
                ><span>{{ other.subject }}</span></span
              >
            </a>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
  import { image } from '@/mixins';
  import { methods } from '@/utils';
  export default {
    name: 'Effuse',
    mixins: [image],
    props: {
      list: { type: Array },
      options: { type: Object },
      contentWidth: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        imgBasePath: imgBasePath,
        width: 1000,
        bigNews: this.list[0],
        showNews: [],
        effuseHeight: methods.getContentHeight(this.options), //高度
        flag: true, //true：左右排列；false：上下排列
        bigNewsSize: {}, //大图新闻尺寸
        otherNewsSize: {}, //其他图片尺寸
        otherBoxSize: {},
        otherNum: 2, //除大图外其他图片数量
        maxImageSize: 250,
        newsBasePath: `${_basePath}/`
      };
    },
    created() {
      // console.log('effuse宽度', this.contentWidth, this.effuseHeight);
      this.showImageNumber(this.contentWidth, this.effuseHeight);
    },
    methods: {
      /**
       * @description: 平铺图片数量
       */
      showImageNumber(w, h) {
        if (w >= 1600) {
          // 9图
          this.otherNum = 8;
          this.whichLayout(w, h);
        } else if (w >= 1300 && w < 1600) {
          // 7图
          this.otherNum = 6;
          this.whichLayout(w, h);
        } else if (w >= 950 && w < 1300) {
          // 5图
          this.otherNum = 4;
          this.whichLayout(w, h);
        } else {
          // 3图
          this.otherNum = 2;
          this.whichLayout(w, h);
        }
        this.showNews = this.list.slice(1, this.otherNum + 1);
      },
      /**
       * @description: 判断样式
       */
      whichLayout(w, h) {
        if (w > 478) {
          this.flag = true;
          this.maxImageSize = this.maxImageSize < w ? this.maxImageSize : w / 2 - 20;
          let bigWidth = w - 50 - (this.maxImageSize + 50) * (this.otherNum / 2);
          bigWidth = `${bigWidth > this.maxImageSize ? bigWidth : this.maxImageSize - 50}`;
          this.bigNewsSize = {
            width: `${bigWidth}px`,
            height: `${h - 4}px`
          };

          this.otherNewsSize = {
            width:
              (this.otherNum === 2
                ? this.contentWidth - 30 - bigWidth - 22
                : this.maxImageSize + 34) + 'px',
            height: h / 2 - 4 + 'px'
          };
        } else {
          h -= 20;
          this.flag = false;
          this.bigNewsSize = {
            width: '100%',
            height: h / 2 + 'px'
          };
          this.otherNewsSize = {
            width: (w - 30) / 2 - 10 + 'px',
            height: h / 2 + 'px'
          };
          // this.otherBoxSize = {
          //     width: w + 'px',
          // };
        }
        // console.log(this.flag);
      }
    }
  };
</script>
<style lang="scss" scoped>
  * {
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
  }

  .effuse {
    width: 100%;
    height: 100%;
    // overflow: hidden;
    // border: 1px solid #e0e0e0;
  }

  .row {
    .bigNews {
      float: left;
      height: 100%;
      margin-right: 20px;
    }

    .text-img {
      margin-right: 20px;
      cursor: pointer;
    }
  }

  .column {
    .bigNews {
      float: none;
      margin-bottom: 10px;
    }

    > .down-row {
      .text-img {
        margin: 0 5px;
      }
    }
  }

  ul,
  .up-row {
    width: 100%;
    // height: 100%;
    // border: 1px solid #000;
  }

  .bigNews {
    // display: inline-block;
    // height: 100%;
    float: left;
    border-radius: 10px;
    // border: 1px solid #000;
  }

  .text-img {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 10px;

    .text {
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      height: 30px;
      padding-left: 10px;
      overflow: hidden;
      line-height: 30px;
      color: #fff;
      text-overflow: ellipsis;
      white-space: nowrap;
      background-color: rgba(0, 0, 0, 0.5);
      border-bottom-right-radius: 10px;
      border-bottom-left-radius: 10px;
      filter: progid:dximagetransform.microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);
    }

    > a {
      display: block;
      height: 100%;
      overflow: hidden;
      text-align: center;
      border-radius: 10px;
    }
  }

  .otherNews {
    height: 100%;

    .text-img {
      display: inline-block;
    }
  }
</style>
